<template>
	<view class="login-container">
		<!-- 蓝色科技感背景 -->
		<view class="bg-gradient"></view>
		<view class="bg-wave-1"></view>
		<view class="bg-wave-2"></view>
		<view class="bg-glow-blue"></view>

		<!-- 登录主体内容 -->
		<view class="login-content">
			<!-- Logo和标题 -->
			<view class="header-section">
				<view class="logo-wrapper">
					<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
				</view>
				<text class="app-title">家庭相册管理系统</text>
				<text class="app-subtitle">一键登录，开启美好回忆之旅</text>
			</view>

			<!-- 微信一键登录按钮 -->
			<view class="login-section">
				<button class="wechat-login-btn" :loading="loading" @click="wechatLogin">
					<text class="wechat-text">微信一键登录</text>
				</button>

				<!-- 其他登录方式提示 -->
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">其他登录方式</text>
					<view class="divider-line"></view>
				</view>

				<!-- 备用账号密码登录表单 -->
				<view class="form-wrapper" v-if="showAltLogin">
					<view class="form-item">

						<uv-input prefixIcon="account" v-model="username" class="form-input" placeholder="请输入账号"
							placeholder-class="placeholder-text" />
					</view>

					<view class="form-item">
						<uv-input prefixIcon="lock-open" v-model="password" class="form-input" type="password"
							placeholder="请输入密码" placeholder-class="placeholder-text" />
					</view>

					<view class="form-options">
						<view class="remember-option">
							<view class="checkbox" :class="{ 'checked': rememberMe }" @click="rememberMe = !rememberMe">
								<image v-if="rememberMe" src="/static/check-icon.png" mode="aspectFit"
									class="check-icon"></image>
							</view>
							<text class="remember-text">记住账号</text>
						</view>
						<text class="forget-text" @click="forgetPassword">忘记密码</text>
					</view>

					<button class="account-login-btn" @click="accountLogin" :loading="accountLoading">
						账号登录
					</button>
				</view>

				<text v-if="!showAltLogin" class="alt-login-text" @click="showAltLogin = true">
					切换到账号密码登录
				</text>
			</view>

			<!-- 底部说明 -->
			<view class="footer">
				<text class="privacy-text">登录即表示您同意</text>
				<text class="privacy-link" @click="showPrivacy">《用户协议》</text>
				<text class="privacy-text">和</text>
				<text class="privacy-link" @click="showTerms">《隐私政策》</text>
			</view>
		</view>
		<showModel :show="show"></showModel>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			loading: false,
			accountLoading: false,
			username: '',
			password: '',
			rememberMe: false,
			showAltLogin: false
		}
	},
	onLoad() {
		// 检查是否有记住的账号
		const savedUsername = uni.getStorageSync('rememberedUsername');
		if (savedUsername) {
			this.username = savedUsername;
			this.rememberMe = true;
		}

		// 预加载图标资源
		this.preloadIcons();
	},
	methods: {
		// 预加载图标
		preloadIcons() {
			// 微信小程序环境下预加载必要图标
			const icons = ['/static/check-icon.png'];
			icons.forEach(icon => {
				wx.getImageInfo({
					src: icon,
					success: () => { },
					fail: () => {
						console.log('图标预加载失败:', icon);
					}
				});
			});
		},

		// 微信一键登录
		wechatLogin() {
			const that = this;
			that.loading = true;

			// 检查是否在微信环境
			if (wx) {
				// 获取微信登录code
				wx.login({
					success(res) {
						if (res.code) {
							// 模拟发送code到服务器获取用户信息
							setTimeout(() => {
								// 模拟登录成功
								that.loading = false;
								that.show=true

								// 存储登录状态
								wx.setStorageSync('isLoggedIn', true);

								// 跳转到首页
								setTimeout(() => {
									// 这里替换为实际的首页路径
									// wx.switchTab({ url: '/pages/index/index' });
									console.log('跳转到首页');
								}, 1000);
							}, 1500);
						} else {
							that.loading = false;
							wx.showToast({
								title: '登录失败，请重试',
								icon: 'none'
							});
						}
					},
					fail() {
						that.loading = false;
						wx.showToast({
							title: '获取微信授权失败',
							icon: 'none'
						});
					}
				});
			} else {
				// 非微信环境模拟登录
				setTimeout(() => {
					that.loading = false;
					uni.showToast({
						title: '模拟登录成功',
						icon: 'success'
					});
				}, 1500);
			}
		},

		// 账号密码登录
		accountLogin() {
			if (!this.username || !this.password) {
				uni.showToast({
					title: '请输入账号和密码',
					icon: 'none'
				});
				return;
			}

			this.accountLoading = true;

			// 模拟登录请求
			setTimeout(() => {
				// 记住账号
				if (this.rememberMe) {
					uni.setStorageSync('rememberedUsername', this.username);
				} else {
					uni.removeStorageSync('rememberedUsername');
				}

				this.accountLoading = false;
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});

				// 登录成功后跳转
				setTimeout(() => {
					// 这里替换为实际的首页路径
					console.log('跳转到首页');
				}, 1000);
			}, 1500);
		},

		// 忘记密码
		forgetPassword() {
			uni.showModal({
				title: '找回密码',
				content: '请联系管理员重置密码',
				showCancel: false,
				confirmText: '确定'
			});
		},

		// 显示隐私政策
		showPrivacy() {
			uni.showToast({
				title: '隐私政策页面开发中',
				icon: 'none'
			});
		},

		// 显示用户协议
		showTerms() {
			uni.showToast({
				title: '用户协议页面开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style scoped>
/* 蓝色科技感背景 */
.login-container {
	position: relative;
	min-height: 100vh;
	background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
	overflow: hidden;
}

/* 波浪背景效果 */
.bg-gradient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #1e88e5 0%, #64b5f6 100%);
}

.bg-wave-1 {
	position: absolute;
	bottom: -10%;
	left: 0;
	right: 0;
	height: 300rpx;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	transform: skewY(-3deg);
}

.bg-wave-2 {
	position: absolute;
	bottom: -20%;
	left: 0;
	right: 0;
	height: 200rpx;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
	transform: skewY(2deg);
}

/* 蓝色光晕效果 */
.bg-glow-blue {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	width: 700rpx;
	height: 700rpx;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
	filter: blur(50rpx);
}

/* 登录内容区域 */
.login-content {
	position: relative;
	z-index: 1;
	padding: 100rpx 40rpx 60rpx;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* 头部区域 */
.header-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 100rpx;
	margin-bottom: 80rpx;
}

.logo-wrapper {
	width: 200rpx;
	height: 200rpx;
	border-radius: 40rpx;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
}

.logo {
	width: 150rpx;
	height: 150rpx;
}

.app-title {
	font-size: 42rpx;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 15rpx;
}

.app-subtitle {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 3rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 登录按钮区域 */
.login-section {
	width: 100%;
	max-width: 700rpx;
	margin: 0 auto;
}

/* 微信登录按钮 */
.wechat-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #07c160 0%, #00b42a 100%);
	color: #fff;
	border-radius: 60rpx;
	height: 96rpx;
	line-height: 96rpx;
	font-size: 34rpx;
	font-weight: 600;
	box-shadow: 0 15rpx 40rpx rgba(7, 193, 96, 0.3);
	margin-bottom: 50rpx;
	border: none;
}

.wechat-login-btn:active {
	transform: scale(0.98);
	box-shadow: 0 10rpx 30rpx rgba(7, 193, 96, 0.4);
}

.wechat-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 15rpx;
}

/* 分割线 */
.divider {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.divider-line {
	flex: 1;
	height: 1rpx;
	background: rgba(255, 255, 255, 0.3);
}

.divider-text {
	padding: 0 30rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

/* 表单样式 */
.form-wrapper {
	background: #ffffff;
	border-radius: 30rpx;
	padding: 30rpx;
	border: 1rpx solid #e5e5e5;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.form-item {
	display: flex;
	align-items: center;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	height: 90rpx;
}

.input-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 20rpx;
}

.form-input {
	flex: 1;
	height: 100%;
	color: #333333;
	font-size: 28rpx;
}

.placeholder-text {
	color: #999999;
}

/* 表单选项 */
.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	font-size: 26rpx;
	color: #666666;
}

.remember-option {
	display: flex;
	align-items: center;
}

.checkbox {
	width: 32rpx;
	height: 32rpx;
	border-radius: 8rpx;
	border: 2rpx solid #cccccc;
	margin-right: 15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox.checked {
	background: #1a73e8;
	border-color: #1a73e8;
}

.check-icon {
	width: 24rpx;
	height: 24rpx;
}

.forget-text {
	color: #1a73e8;
}

/* 账号登录按钮 */
.account-login-btn {
	background: #1a73e8;
	color: #fff;
	border-radius: 60rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	font-weight: 600;
	border: none;
	box-shadow: 0 8rpx 20rpx rgba(26, 115, 232, 0.3);
}

.account-login-btn:active {
	background: rgba(255, 255, 255, 0.3);
}

/* 切换登录方式文本 */
.alt-login-text {
	display: block;
	text-align: center;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	padding: 20rpx 0;
}

/* 底部说明 */
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 60rpx;
	padding-bottom: 40rpx;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.7);
}

.privacy-link {
	color: #fff;
	margin: 0 8rpx;
}

/* 适配小屏幕 */
@media screen and (max-width: 320px) {
	.header-section {
		margin-top: 60rpx;
	}

	.logo-wrapper {
		width: 180rpx;
		height: 180rpx;
	}

	.app-title {
		font-size: 38rpx;
	}
}
</style>
